<template>
  <el-dialog :visible="visible"
             title="调整"
             :before-close="close"
             width="22%"
             append-to-body>
    <el-form ref="form"
             inline>
      <div class="center">
        <div>总重量：{{ activeAmount.calculateWeight }}公斤
          <span v-if="activeAmount.weightAddition">(含补差值: {{activeAmount.weightAddition}}公斤)</span>
        </div>
        <el-form-item class="mt10">
          <el-input v-model="activeAmount.weight"
                    style="width: 15vw"
                    oninput="this.value=(this.value.match(/\d{0,8}(\.\d{0,4})?/)||[''])[0];"
                    placeholder="请输入调整后总重量">
            <template slot="append">公斤</template>
          </el-input>
        </el-form-item>
        <div class="mt20">总体积：{{ activeAmount.calculateVolume }}立方米
          <span v-if="activeAmount.volumeAddition">(含补差值: {{activeAmount.volumeAddition}}立方米)</span>
        </div>
        <el-form-item class="mt10">
          <el-input v-model="activeAmount.volumn"
                    style="width: 15vw"
                    oninput="this.value=(this.value.match(/\d{0,8}(\.\d{0,6})?/)||[''])[0];"
                    placeholder="请输入调整后总体积">
            <template slot="append">立方米</template>
          </el-input>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="default"
                 @click="close">取消</el-button>
      <el-button type="primary"
                 @click="container">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AdjustmentDialog",
  props: {
    visible: Boolean,
    activeAmount: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    activeAmount: {
      deep: true,
      handler (val) {
        this.activeAmount = val;
      }
    }
  },
  methods: {
    // 取消
    close () {
      this.$emit("update:visible", false);
    },
    // 确定
    container () {
      this.$emit("adjustmentData", {
        weight: this.activeAmount.weight,
        volumn: this.activeAmount.volumn
      });
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.center {
  padding: 10px 30px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
</style>
